<template>
  <el-drawer
    :append-to-body="true"
    size="650px"
    :visible.sync="show"
    direction="rtl"
    :before-close="handleClose"
  >
    <div slot="title" class="title_arrow">
      <span class="el-icon-arrow-left"></span>
      <span> {{ title }} </span>
    </div>
    <div class="function_drawer">
      <div class="function_box">
        <el-input
          placeholder="请输入内容"
          suffix-icon="el-icon-search"
          v-model="value"
        >
        </el-input>
        <div class="list" id="pointBoxFun" ref="pointBoxFun">
          <div
            class="item ceshi233"
            v-for="(item, index) in items"
            :key="index"
          >
            <div class="title" v-if="item.list.length !== 0" :ref="item.name">
              {{ item.name }}
            </div>
            <div class="radio_box">
              <el-radio
                @change="changeRadio(rad)"
                v-for="(rad, i) in item.list"
                class="radio_item"
                v-model="radio"
                :label="rad.valueType"
                :key="i"
                >{{ rad.valueType }}</el-radio
              >
            </div>
          </div>
        </div>
        <SpotPoint
          :active="active"
          :list="extensions[objKey]"
          @handPoint="handPoint"
        ></SpotPoint>
        <TopOperationButton @submit="submit" @handClose="handClose" />
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { mapGetters } from "vuex";
import SpotPoint from "@/components/SpotPoint";
import TopOperationButton from "@/views/edge/CommonComponents/TopOperationButton";
import _ from "lodash";
import { delay } from "@/utils/index";
export default {
  components: {
    SpotPoint,
    TopOperationButton,
  },
  data() {
    return {
      flg: false,
      show: false,
      value: "",
      radio: "",
      list: [],
      flag: true,
      row: {},
      isAnimation: false,
      active: 0,
    };
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    // 函数类型的抽屉和过滤的抽屉数据,动态的传入key
    objKey: {
      type: String,
      default: "arr",
    },
  },
  watch: {
    show(newVal) {
      console.log(newVal, "newValnewValnewVal");
      if (newVal === true) {
        const that = this;
        this.$nextTick(function () {
          // 监听这个dom的scroll事件
          that.domOnload();
        });
      }
    },
  },
  computed: {
    ...mapGetters(["extensions"]),
    //过滤方法
    items() {
      var _search = this.value;
      // 深拷贝-不然过滤之后下次在过滤拿的是上一次过滤之后的数据
      let newArr = _.cloneDeep(this.extensions[this.objKey]);
      if (this.flag)
        if (_search) {
          newArr.forEach((item) => {
            item.list = _.filter(item.list, function (o) {
              let val = o.valueType ? o.valueType : o.value;
              return val.toLowerCase().indexOf(_search.toLowerCase()) != -1;
            });
          });
        }
      if (!this.flag) {
        this.flag = true;
      }
      return newArr;
    },
  },
  methods: {
    domOnload() {
      let domScroll = document.querySelector("#pointBoxFun");
      domScroll.removeEventListener("scroll", this.orderScroll);
      // 监听之前先销毁上一次监听
      domScroll.addEventListener("scroll", this.orderScroll);
      // 监听dom滚动事件
    },
    orderScroll(e) {
      // 加个锁-如果是点击事件,停止滚动事件的触发
      if (this.flg) {
        this.flg = false;
        return;
      }
      // 节流
      delay(() => {
        let aDom = document.querySelector(`#pointBoxFun`);
        let itemDoms = document.getElementsByClassName("ceshi233");
        /**
         * 外部容器滚动的高度
         */
        let scrollHeight = aDom.scrollTop;
        let additionalHeight = 0;

        for (let index = 0; index < itemDoms.length; index++) {
          const className = itemDoms[index];
          let height = className.offsetHeight;
          /**
           * item累加的高度 additionalHeight
           */
          additionalHeight += height;

          if (additionalHeight >= scrollHeight) {
            /**
             * 触发修改选中的active变量
             */
            this.changeChooseCircle(index);
            break;
          }
        }
      }, 300);
    },
    changeChooseCircle(index) {
      console.log(index);
      this.active = index;
      this.flg = false;
    },
    handClose() {
      this.$emit("handClose");
    },
    resetForm() {
      this.value = "";
      this.radio = "";
    },
    changeRadio(item) {
      this.row = item;
      this.flag = false;
      this.value = item.valueType;
    },
    handleClose(done) {
      this.show = false;
    },
    submit() {
      if (JSON.stringify(this.row) == "{}") {
        this.$msg("请选择功能函数");
        return;
      }
      this.show = false;
      this.$emit("submit", this.row);
    },
    handPoint(index) {
      this.$nextTick(() => {
        this.active = index;
        const that = this;
        // 此处使用refs获取dom元素,原生的获取不到 原因不明
        const scrollBox = this.$refs["pointBoxFun"]; // 容器
        const id = this.extensions[this.objKey][index].name;
        // const curTag = document.querySelector("#" + id); // 节点tag
        const curTag = this.$refs[id][0]; // 节点tag
        if (!curTag) return;
        let distance = scrollBox.scrollTop;
        const offsetTop = curTag.offsetTop; // 滚动距离
        let step = offsetTop / 50;
        if (offsetTop > distance) {
          smoothDown();
        } else {
          const newTotal = distance - offsetTop;
          step = newTotal / 50;
          smoothUp();
        }
        scrollBox.scrollTop = offsetTop;
        function smoothDown() {
          if (distance < offsetTop && that.isAnimation == true) {
            distance += step;
            scrollBox.scrollTop = distance;
            setTimeout(smoothDown, 10);
          } else {
            scrollBox.scrollTop = offsetTop;
          }
        }
        function smoothUp() {
          if (distance > offsetTop && that.isAnimation == true) {
            distance -= step;
            scrollBox.scrollTop = distance;
            setTimeout(smoothUp, 10);
          } else {
            scrollBox.scrollTop = offsetTop;
          }
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.title_arrow {
  display: flex;
  cursor: pointer;
  align-items: center;
}
.function_drawer {
  /* display: flex; */
}
.function_box {
  padding: 30px;
  padding-top: 0;
  /deep/ .el-radio__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 430px;
    display: inline-block;
  }
  .list {
    position: relative;
    overflow-y: auto;
    height: 75vh;
    padding-bottom: 50px;
    margin-top: 10px;
    .item {
      .title {
        font-size: 20px;
        color: #333;
        margin: 10px 0;
      }
    }
    .radio_box {
      display: flex;
      .radio_item {
        margin: 10px 0;
        display: flex;
        /* align-items: center; */
        /deep/ .el-radio__label {
          word-wrap: break-word;
          white-space: inherit;
          overflow: inherit;
        }
      }
      flex-direction: column;
    }
  }
}
</style>